// 导入资源
import { Table, Tag, Space } from 'antd'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
import img404 from '@/assets/error.png'

import { Link } from 'react-router-dom'
import { Card, Breadcrumb, Form, Button, Radio, DatePicker, Select, Popconfirm } from 'antd'
// 引入汉化包 时间选择器显示中文
import locale from 'antd/es/date-picker/locale/zh_CN'
import { useChannel } from '@/hooks/useChannel'
import { useEffect, useState } from 'react'
import { getArticleListAPI, delArticleListAPI } from '@/apis/articles'
import { useNavigate } from 'react-router-dom'
const { Option } = Select
const { RangePicker } = DatePicker



const Article = () => {
    const navagite = useNavigate()


    // 获取频道列表
    const { channelList } = useChannel()

    const status = {
        0: <Tag color="warning">草稿</Tag>,
        1: <Tag color="warning">待审核</Tag>,
        2: <Tag color="success">审核通过</Tag>,
        3: <Tag color="red">审核失败</Tag>,
    }

    // 准备列数据
    const columns = [
        {
            title: '封面',
            dataIndex: 'cover',
            width: 120,
            render: cover => {
                return <img src={cover.images[0] || img404} width={80} height={60} alt="" />
            }
        },
        {
            title: '标题',
            dataIndex: 'title',
            width: 220
        },
        {
            title: '状态',
            dataIndex: 'status',
            // data - 后端状态返回的状态status 根据他做条件渲染
            // data == 1 待审核
            // data == 2 审核通过
            render: data => status[data]
        },
        {
            title: '发布时间',
            dataIndex: 'pubdate'
        },
        {
            title: '阅读数',
            dataIndex: 'read_count'
        },
        {
            title: '评论数',
            dataIndex: 'comment_count'
        },
        {
            title: '点赞数',
            dataIndex: 'like_count'
        },
        {
            title: '操作',
            render: data => {
                return (
                    <Space size="middle">
                        <Button
                            type="primary"
                            shape="circle"
                            icon={<EditOutlined />}
                            onClick={() => navagite(`/publish?id=${data.id}`)}
                        />

                        <Popconfirm title="确认删除该条文章吗?"
                            onConfirm={() => delArticle(data)}
                            okText="确认"
                            cancelText="取消">
                            <Button
                                type="primary"
                                danger
                                shape="circle"
                                icon={<DeleteOutlined />}
                            />
                        </Popconfirm>
                    </Space>
                )
            }
        }
    ]
    // 准备表格body数据
    /*     const data = [
            {
                            id: '8218',
                        comment_count: 0,
                        cover: {
                            images: [],
                },
                        like_count: 0,
                        pubdate: '2019-03-11 09:00:00',
                        read_count: 2,
                        status: 2,
                        title: 'wkwebview离线化加载h5资源解决方案'
            }
                        ] */

    // 获取文章列表
    const [count, setCount] = useState(0)
    const [list, setList] = useState([])

    // 获取筛选参数
    const [reqDate, setReqDate] = useState({
        // 文章状态
        status: '',
        // 
        channel_id: '',
        // 起始时间
        begin_pubdate: '',
        // 截至时间
        end_pubdate: '',
        // 当前页码
        page: 1,
        // 当前页条数
        per_page: 4,
    })

    useEffect(() => {
        const getArticleList = async () => {
            const res = await getArticleListAPI(reqDate)
            setList(res.data.results)
            setCount(res.data.total_count)
        }
        getArticleList()
    }, [reqDate])


    /* 筛选功能 */
    const onFinish = ({ status, channel_id, date }) => {
        setReqDate({
            ...reqDate,
            status,
            channel_id,
            // 起始时间
            begin_pubdate: date[0].format('YYYY-MM-DD'),
            // 截至时间
            end_pubdate: date[1].format('YYYY-MM-DD'),
        })
    }

    // 分页功能
    const onPageChange = page => {
        setReqDate({
            ...reqDate,
            page
        })
    }

    /* 删除功能 */

    const delArticle = async ({ id }) => {
        // 调用接口
        await delArticleListAPI(id)
        /* 更新列表 */
        setReqDate({ ...reqDate })
    }
    return (
        <div>
            <Card
                title={
                    <Breadcrumb items={[
                        { title: <Link to={'/'}>首页</Link> },
                        { title: '文章列表' },
                    ]} />
                }
                style={{ marginBottom: 20 }}
            >
                <Form initialValues={{ status: '' }} onFinish={onFinish}>
                    <Form.Item label="状态" name="status">
                        <Radio.Group>
                            <Radio value={''}>全部</Radio>
                            <Radio value={'0'}>草稿</Radio>
                            <Radio value={'2'}>审核通过</Radio>
                        </Radio.Group>
                    </Form.Item>

                    <Form.Item label="频道" name="channel_id">
                        <Select
                            placeholder="请选择文章频道"
                            // defaultValue="lucy"
                            style={{ width: 120 }}
                        >
                            {channelList.map(item => <Option value={item.name} key={item.id}>{item.name}</Option>)}
                        </Select>
                    </Form.Item>

                    <Form.Item label="日期" name="date">
                        {/* 传入locale属性 控制中文显示*/}
                        <RangePicker locale={locale}></RangePicker>
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" style={{ marginLeft: 40 }}>
                            筛选
                        </Button>
                    </Form.Item>
                </Form>
            </Card>

            {/* 分页 */}
            <Card title={`根据筛选条件共查询到 ${count} 条结果：`} >
                <Table rowKey="id" columns={columns} dataSource={list} pagination={{
                    total: count,
                    pageSize: reqDate.per_page,
                    onChange: onPageChange
                }} />
            </Card>
        </div>
    )
}

export default Article